<template>
  <div class="full-container">
    <el-card style="height: 100%; width: 100%">
      <template #header>
        <div class="card-header">
          <el-button type="primary" @click="addTemp">
            <i class="el-icon iconfont icon-zhuanshukefu"></i>
            <span>新增模板</span>
          </el-button>
        </div>
      </template>
      <vxe-table
        align="center"
        :loading="loading"
        :size="configStore.getTableSize"
        ref="tableRef"
        border
        height="500"
        :row-config="{ isHover: true }"
        :data="tableData"
      >
        <vxe-column type="seq" width="70"></vxe-column>
        <vxe-column field="name" title="模板名称" show-overflow></vxe-column>
        <vxe-column field="created_at" title="创建时间" width="160"></vxe-column>
        <vxe-column title="操作" width="160">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="editTemp(row)">
              <i class="el-icon iconfont icon-zhuanshukefu"></i>
              <span>修改</span>
            </el-button>
          </template>
        </vxe-column>
      </vxe-table>
      <div style="display: flex; justify-content: center; margin-top: 24px">
        <el-pagination
          @update:current-page="handlePageChange"
          :default-page-size="10"
          :total="total"
          size="small"
          background
          layout="prev, pager, next"
          class="mt-4"
        />
      </div>
    </el-card>

    <!-- 模板对话框（新增/修改共用） -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="90dvw" body-class="body-class">
      <div style="display: flex; flex-direction: column">
        <div style="margin-bottom: 12px">
          <el-anchor
            ref="anchorRef"
            direction="horizontal"
            :container="containerRef"
            type="default"
            :offset="60"
            @click="handleClick"
            :duration="1500"
            select-scroll-top
          >
            <el-anchor-link href="#section1" title="基础配置" />
            <el-anchor-link href="#section2" title="标题配置" />
            <el-anchor-link href="#section3" title="优化配置" />
            <el-anchor-link href="#section4" title="SKU配置" />
            <el-anchor-link href="#section5" title="其他设置" />
            <el-anchor-link href="#section6" title="图片设置" />
            <el-anchor-link href="#section7" title="加价策略" />
            <el-anchor-link href="#section8" title="运费模板设置" />
            <el-anchor-link href="#section9" title="词库过滤" />
          </el-anchor>
        </div>
        <div>
          <el-form
            status-icon
            scroll-to-error
            lang="zh-CN"
            label-width="160px"
            label-position="left"
            ref="formRef"
            :model="form"
            :rules="rules"
          >
            <div ref="containerRef" style="height: 60dvh; overflow-y: auto">
              <div class="section" id="section1">
                <el-card>
                  <template #header>
                    <div class="card-header">
                      <span>基础配置</span>
                    </div>
                  </template>
                  <el-row :gutter="20">
                    <el-col :span="24" class="grid-cell">
                      <el-form-item label="模板名称" prop="t1.mbmc">
                        <el-input
                          placeholder="请输入模板名称"
                          v-model="form.t1.mbmc"
                          type="text"
                          clearable
                        ></el-input>
                      </el-form-item>
                    </el-col>

                    <el-col :span="12">
                      <el-form-item label="新旧程度" class="label-right-align">
                        <el-radio-group v-model="form.t1.xjcd">
                          <el-radio label="全新">全新</el-radio>
                          <el-radio label="二手">二手</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                      <el-form-item label="上架方式" class="label-right-align">
                        <el-radio-group v-model="form.t1.sjfs">
                          <el-radio label="立即上架">立即上架</el-radio>
                          <el-radio label="放入仓库">放入仓库</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-row :gutter="20">
                        <el-col :span="12" class="grid-cell">
                          <el-form-item label="品牌更改" class="label-right-align">
                            <el-radio-group v-model="form.t1.ppgg">
                              <el-radio label="原品牌">原品牌</el-radio>
                              <el-radio label="无品牌/无注册商标">无品牌/无注册商标</el-radio>
                              <el-radio label="自定义品牌">自定义品牌</el-radio>
                            </el-radio-group>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12" class="grid-cell" v-if="form.t1.ppgg == '自定义品牌'">
                          <el-input
                            placeholder="请输入自定义品牌"
                            style="display: inline-block"
                            v-model="form.t1.zdyppmc"
                            type="text"
                            clearable
                          ></el-input>
                        </el-col>
                      </el-row>
                    </el-col>
                    <el-col :span="24" class="grid-cell">
                      <el-row :gutter="20">
                        <el-col :span="12">
                          <el-form-item label="商家编码" class="label-right-align">
                            <el-radio-group v-model="form.t1.sjbm">
                              <el-radio label="全新">不设置商家编码</el-radio>
                              <el-radio label="加密商家编码">加密商家编码</el-radio>
                              <el-radio label="不加密商家编码">不加密商家编码</el-radio>
                              <el-radio label="自定义商家编码">自定义商家编码</el-radio>
                            </el-radio-group>
                          </el-form-item>
                        </el-col>
                        <el-col
                          :span="12"
                          class="grid-cell"
                          v-if="form.t1.sjbm == '自定义商家编码'"
                        >
                          <el-input
                            placeholder="请输入商品编码"
                            style="display: inline-block"
                            v-model="form.t1.zdysjbm"
                            type="text"
                            clearable
                          ></el-input>
                        </el-col>
                      </el-row>
                    </el-col>
                    <el-col :span="24" class="grid-cell">
                      <el-form-item label="售后服务" class="label-right-align">
                        <el-checkbox-group v-model="form.t1.shfw">
                          <el-checkbox label="发票">发票</el-checkbox>
                          <el-checkbox label="保修">保修</el-checkbox>
                          <el-checkbox label="退换货">退换货</el-checkbox>
                          <el-checkbox label="会员打折">会员打折</el-checkbox>
                          <el-checkbox label="七天无理由退货">七天无理由退货</el-checkbox>
                        </el-checkbox-group>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-card>
              </div>
              <div class="section" id="section2">
                <el-card>
                  <template #header>
                    <div class="card-header">
                      <span>标题配置</span>
                    </div>
                  </template>
                  <el-row :gutter="20">
                    <el-col :span="12" class="grid-cell">
                      <el-form-item label="添加前缀">
                        <el-input
                          placeholder="请输入添加前缀"
                          v-model="form.t2.tjqz"
                          type="text"
                          clearable
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                      <el-form-item label="添加后缀">
                        <el-input
                          placeholder="请输入添加后缀"
                          v-model="form.t2.tjhz"
                          type="text"
                          clearable
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                      <el-form-item label="查找内容">
                        <el-input
                          placeholder="请输入查找内容"
                          v-model="form.t2.cznr"
                          type="text"
                          clearable
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                      <el-form-item label="替换内容">
                        <el-input
                          placeholder="请输入替换内容"
                          v-model="form.t2.thnr"
                          type="text"
                          clearable
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24" class="grid-cell">
                      <el-form-item label="删除内容">
                        <el-input
                          placeholder="请输入删除内容"
                          v-model="form.t2.scnr"
                          type="text"
                          clearable
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24" class="grid-cell">
                      <div style="display: flex; align-items: center; gap: 20">
                        <div class="el-form-item" style="display: flex; align-items: center">
                          <span class="el-form-item__label">删除标题前</span>
                          <el-input
                            v-model="form.t2.scbtq"
                            type="text"
                            clearable
                            style="width: 80px; margin: 0 6px"
                          ></el-input>
                          <span class="el-form-item__label">个字</span>
                        </div>
                        <div class="el-form-item" style="display: flex; align-items: center">
                          <span class="el-form-item__label">删除标题后</span>
                          <el-input
                            v-model="form.t2.scbth"
                            type="text"
                            clearable
                            style="width: 80px; margin: 0 6px"
                          ></el-input>
                          <span class="el-form-item__label">个字</span>
                        </div>
                        <div class="el-form-item" style="display: flex; align-items: center">
                          <span class="el-form-item__label">过滤SKU名称长度低于</span>
                          <el-input
                            v-model="form.t2.glskucd"
                            type="text"
                            clearable
                            style="width: 80px; margin: 0 6px"
                          ></el-input>
                          <span class="el-form-item__label">的宝贝</span>
                        </div>
                      </div>
                    </el-col>

                    <el-col :span="24">
                      <el-form-item label="是否删除【】中的内容" class="label-right-align">
                        <el-radio-group v-model="form.t2.sfsckhnr">
                          <el-radio label="是">是</el-radio>
                          <el-radio label="否">否</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="是否删除标题中的数字" class="label-right-align">
                        <el-radio-group v-model="form.t2.sfscbtsz">
                          <el-radio label="是">是</el-radio>
                          <el-radio label="否">否</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="是否删除标题中的空格" class="label-right-align">
                        <el-radio-group v-model="form.t2.sfscbtkg">
                          <el-radio label="是">是</el-radio>
                          <el-radio label="否">否</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="是否删除标题中字母" class="label-right-align">
                        <el-radio-group v-model="form.t2.sfscbtzm">
                          <el-radio label="是">是</el-radio>
                          <el-radio label="否">否</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="是否标题插入随机字符" class="label-right-align">
                        <el-radio-group v-model="form.t2.sfcrsjzf">
                          <el-radio label="是">是</el-radio>
                          <el-radio label="否">否</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="是否允许重复发布" class="label-right-align">
                        <el-radio-group v-model="form.t2.sfyxcffb">
                          <el-radio label="是">是</el-radio>
                          <el-radio label="否">否</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-card>
              </div>
              <div class="section" id="section3">
                <el-card>
                  <template #header>
                    <div class="card-header">
                      <span>优化配置</span>
                    </div>
                  </template>
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label="过滤类目" class="label-right-align">
                        <el-tree-v2
                          style="min-width: 800px"
                          :height="400"
                          ref="yhpzRef"
                          :data="getLeimuData"
                          show-checkbox
                          node-key="id"
                          :props="defaultProps"
                          @node-click="handleNodeClick"
                        />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-card>
              </div>
              <div class="section" id="section4">
                <el-card>
                  <template #header>
                    <div class="card-header">
                      <span>SKU配置</span>
                    </div>
                  </template>
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label="SKU设置" class="label-right-align">
                        <el-radio-group v-model="form.t4.szsku">
                          <el-radio label="不定义SKU">不定义SKU</el-radio>
                          <el-radio label="自定义SKU">自定义SKU</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="form.t4.szsku == '自定义SKU'">
                      <el-row :gutter="20">
                        <el-col :span="8">
                          <el-form-item label-width="60px" label="名称">
                            <el-input v-model="form.t4.mc"></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label-width="60px" label="库存">
                            <el-input v-model="form.t4.sku_kc"></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label-width="60px" label="价格">
                            <el-input v-model="form.t4.sku_jg"></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-col>

                    <el-col :span="24">
                      <el-row :gutter="20">
                        <el-col :span="6" class="grid-cell">
                          <el-form-item label="过滤Sku价格低于">
                            <el-input
                              style="width: 80px"
                              v-model="form.t4.glskujgdy"
                              type="number"
                              clearable
                            ></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="6" class="grid-cell">
                          <el-form-item label="过滤Sku价格高于">
                            <el-input
                              style="width: 80px"
                              v-model="form.t4.glskujggy"
                              type="number"
                              clearable
                            ></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-col>
                    <el-col :span="24">
                      <el-row :gutter="20">
                        <el-col :span="6" class="grid-cell">
                          <el-form-item label="过滤Sku库存少于">
                            <el-input
                              style="width: 80px"
                              v-model="form.t4.glskukcdy"
                              type="number"
                              clearable
                            ></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="6" class="grid-cell">
                          <el-form-item label="过滤Sku销量少于">
                            <el-input
                              style="width: 80px"
                              v-model="form.t4.glskuxldy"
                              type="number"
                              clearable
                            ></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-col>
                    <el-col :span="24">
                      <el-row :gutter="20">
                        <el-col :span="6" class="grid-cell">
                          <el-form-item label="宝贝一口价低于">
                            <el-input
                              style="width: 80px"
                              v-model="form.t4.bbykjdy"
                              type="number"
                              clearable
                            ></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="6" class="grid-cell">
                          <el-form-item label="宝贝一口价高于">
                            <el-input
                              style="width: 80px"
                              v-model="form.t4.bbykjgy"
                              type="number"
                              clearable
                            ></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-col>
                    <el-col :span="24" class="grid-cell">
                      <el-form-item label="过滤SKU名字包含">
                        <el-input v-model="form.t4.glskumzbh" type="textarea" clearable></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-card>
              </div>
              <div class="section" id="section5">
                <el-card>
                  <template #header>
                    <div class="card-header">
                      <span>其他设置</span>
                    </div>
                  </template>
                  <el-row :gutter="20">
                    <el-col :span="24" class="grid-cell">
                      <el-form-item label="图片压缩率">
                        <el-input
                          v-model="form.t5.tpysl"
                          style="max-width: 160px"
                          placeholder="图片压缩率"
                        >
                          <template #append>%</template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24" class="grid-cell">
                      <el-form-item label="指定类目" style="position: relative">
                        <el-tree-v2
                          style="min-width: 800px"
                          :height="400"
                          ref="zdlmRef"
                          :data="getLeimuData"
                          show-checkbox
                          node-key="id"
                          :props="defaultProps"
                          @node-click="handleNodeClick2"
                        />
                        <!-- <el-input
                          v-model="form.t5.zdlm"
                          style="max-width: 100%"
                          placeholder="指定类目"
                          type="textarea"
                        >
                        </el-input>
                        <div style="margin-left: 5%; position: absolute; right: 20px">
                          <el-button type="primary" size="small">
                            <i class="el-icon iconfont icon-zhuanshukefu"></i>
                            <span>选择</span>
                          </el-button>
                          <el-button type="primary" size="small">
                            <i class="el-icon iconfont icon-zhuanshukefu"></i>
                            <span>清空</span>
                          </el-button>
                        </div> -->
                      </el-form-item>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                      <el-form-item label="生产许可证编号">
                        <el-input v-model="form.t5.scxkzbh" type="text" clearable></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                      <el-form-item label="化妆品备案编号">
                        <el-input v-model="form.t5.hzpbabh" type="text" clearable></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                      <el-form-item label="医疗器械注册证号">
                        <el-input v-model="form.t5.ylqxzczh" type="text" clearable></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                      <el-form-item label="医疗器械生产企业">
                        <el-input v-model="form.t5.ylqxscqy" type="text" clearable></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24" class="grid-cell">
                      <el-form-item label="图文详情自定义">
                        <el-input v-model="form.t5.twxqzdy" type="text" clearable></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-card>
              </div>
              <div class="section" id="section6">
                <el-card>
                  <template #header>
                    <div class="card-header">
                      <span>图片设置</span>
                    </div>
                  </template>
                  <el-row :gutter="20">
                    <el-col :span="24">
                      <el-form-item label="是否上传3:4主图" class="label-right-align">
                        <el-radio-group v-model="form.t6.sfsc34zt">
                          <el-radio label="是">是</el-radio>
                          <el-radio label="否">否</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="详情为空，是否主图作为详情图" class="label-right-align">
                        <el-radio-group v-model="form.t6.sfztbwxqt">
                          <el-radio label="是">是</el-radio>
                          <el-radio label="否">否</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="是否上传SKU图" class="label-right-align">
                        <el-radio-group v-model="form.t6.sfscskut">
                          <el-radio label="是">是</el-radio>
                          <el-radio label="否">否</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-card>
              </div>
              <div class="section" id="section7">
                <el-card>
                  <template #header>
                    <div class="card-header">
                      <span>加价策略</span>
                    </div>
                  </template>
                  <el-collapse v-model="activeNames">
                    <el-collapse-item
                      v-for="(item, index) in form.t7.cl"
                      :key="index"
                      :title="`加价策略${index + 1}`"
                      :name="`t${index + 1}`"
                    >
                      <el-row :gutter="20">
                        <el-col :span="24" class="grid-cell">
                          <div style="display: flex; align-items: center">
                            <span
                              :style="{ color: index == 0 ? 'red' : '#ccc' }"
                              class="el-form-item__label"
                              >SKU价格</span
                            >
                            <el-input
                              v-model="item.k1"
                              type="number"
                              clearable
                              style="width: 80px; margin: 0 6px"
                              @input="(val) => handleInput(val, index, 'k1')"
                            ></el-input>
                            <span
                              :style="{ color: index == 0 ? 'red' : '#ccc' }"
                              class="el-form-item__label"
                              >到</span
                            >
                            <el-input
                              v-model="item.k2"
                              type="text"
                              clearable
                              style="width: 80px; margin: 0 6px"
                              @input="(val) => handleInput(val, index, 'k2')"
                            ></el-input>
                            <el-select placeholder="类型" v-model="item.k3" style="width: 80px">
                              <el-option label="促销价" value="促销价" />
                              <el-option label="原价" value="原价" />
                            </el-select>
                            <span
                              :style="{ color: index == 0 ? 'red' : '#ccc' }"
                              class="el-form-item__label"
                              style="margin-left: 6px"
                              >乘以</span
                            >
                            <el-input
                              v-model="item.k4"
                              type="text"
                              clearable
                              style="width: 80px; margin: 0 6px"
                              @input="(val) => handleInput(val, index, 'k4')"
                            ></el-input>
                            <span
                              :style="{ color: index == 0 ? 'red' : '#ccc' }"
                              class="el-form-item__label"
                              >%</span
                            >
                            <span
                              :style="{ color: index == 0 ? 'red' : '#ccc' }"
                              class="el-form-item__label"
                              >加上</span
                            >
                            <el-input
                              v-model="item.k5"
                              type="number"
                              clearable
                              style="width: 80px; margin: 0 6px"
                              @input="(val) => handleInput(val, index, 'k5')"
                            ></el-input>
                            <span
                              :style="{ color: index == 0 ? 'red' : '#ccc' }"
                              style="margin-left: 6px"
                              class="el-form-item__label"
                              >随机加减</span
                            >
                            <el-input
                              v-model="item.k6"
                              type="number"
                              clearable
                              style="width: 80px"
                              @input="(val) => handleInput(val, index, 'k6')"
                            ></el-input>
                            <span
                              :style="{ color: index == 0 ? 'red' : '#ccc' }"
                              class="el-form-item__label"
                              style="margin-left: 6px"
                              >-</span
                            >
                            <el-input
                              v-model="item.k7"
                              type="number"
                              clearable
                              style="width: 80px; margin: 0 6px"
                              @input="(val) => handleInput(val, index, 'k7')"
                            ></el-input>
                            <span
                              :style="{ color: index == 0 ? 'red' : '#ccc' }"
                              class="el-form-item__label"
                              >保留</span
                            >
                            <el-select placeholder="单位" v-model="item.k8" style="width: 80px">
                              <el-option label="元" value="元" />
                              <el-option label="角" value="角" />
                              <el-option label="分" value="分" />
                            </el-select>
                          </div>
                        </el-col>
                      </el-row>
                    </el-collapse-item>
                  </el-collapse>
                </el-card>
              </div>
              <div class="section" id="section8">
                <el-card>
                  <template #header>
                    <div class="card-header">
                      <span>运费模板设置</span>
                    </div>
                  </template>
                  <el-row :gutter="20" class="grid-cell">
                    <el-col :span="12" class="grid-cell">
                      <el-form-item label="发货地区">
                        <el-cascader
                          v-model="form.t8.fhdq"
                          placeholder="选择发货地区"
                          style="width: 100%"
                          :options="getDiquData"
                          :props="{
                            checkStrictly: false, // 允许选择非最后一级（但需手动拦截）
                            emitPath: false, // 仅返回最后一级的值（推荐）
                            value: 'label', // 根据你的数据结构调整
                            label: 'label'
                          }"
                          clearable
                          @change="handleCascaderChange"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                      <el-form-item label="发货时间">
                        <el-select placeholder="请选择发货时间" v-model="form.t8.fhsj">
                          <el-option label="24小时" value="24小时" />
                          <el-option label="48小时" value="48小时" />
                          <el-option label="三天内" value="三天内" />
                          <el-option label="一周内" value="一周内" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                      <el-form-item label="计费方式">
                        <el-select placeholder="请选择计费方式" v-model="form.t8.jffs">
                          <el-option label="按件数" value="24按件数小时" />
                          <el-option label="按体积" value="按体积" />
                          <el-option label="按重量" value="按重量" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                      <el-form-item label="一般地区费用">
                        <el-input v-model="form.t8.ybdqfy" type="number" clearable></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                      <el-form-item label="港澳台海外地区费用">
                        <el-input v-model="form.t8.gathwdqfy" type="number" clearable></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12" class="grid-cell">
                      <el-form-item label="偏远地区费用">
                        <el-input v-model="form.t8.pydqfy" type="text" clearable></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24" class="grid-cell">
                      <el-form-item label="备注">
                        <el-input
                          type="textarea"
                          v-model="form.t8.bz"
                          placeholder="若不设置发货地区，则默认使用店铺内随机运费模板"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-card>
              </div>
              <div class="section" id="section9">
                <el-card>
                  <template #header>
                    <div class="card-header">
                      <span>词库过滤</span>
                    </div>
                  </template>
                  <el-row :gutter="20" class="grid-cell">
                    <el-col :span="24">
                      <el-row :gutter="20" class="grid-cell">
                        <el-col :span="8" class="grid-cell">
                          <el-form-item label="标题过滤">
                            <el-input v-model="form.t9.btgl" type="text" clearable></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="8" class="grid-cell">
                          <el-button type="primary">
                            <i class="el-icon iconfont icon-zhuanshukefu"></i>
                            <span>上传</span>
                          </el-button>
                          <el-button type="primary">
                            <i class="el-icon iconfont icon-zhuanshukefu"></i>
                            <span>查看</span>
                          </el-button>
                          <el-button type="primary">
                            <i class="el-icon iconfont icon-zhuanshukefu"></i>
                            <span>清空</span>
                          </el-button>
                        </el-col>
                        <el-col :span="8" class="grid-cell">
                          <el-form-item label="是否启用云端标题过滤词" class="label-right-align">
                            <el-radio-group v-model="form.t9.sfqyydbtgl">
                              <el-radio label="启用">启用</el-radio>
                              <el-radio label="不启用">不启用</el-radio>
                            </el-radio-group>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-col>
                    <el-col :span="24">
                      <el-row :gutter="20" class="grid-cell">
                        <el-col :span="8" class="grid-cell">
                          <el-form-item label="过滤品牌">
                            <el-input v-model="form.t9.ppgl" type="text" clearable></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="8" class="grid-cell">
                          <el-button type="primary">
                            <i class="el-icon iconfont icon-zhuanshukefu"></i>
                            <span>上传</span>
                          </el-button>
                          <el-button type="primary">
                            <i class="el-icon iconfont icon-zhuanshukefu"></i>
                            <span>查看</span>
                          </el-button>
                          <el-button type="primary">
                            <i class="el-icon iconfont icon-zhuanshukefu"></i>
                            <span>清空</span>
                          </el-button>
                        </el-col>
                        <el-col :span="8" class="grid-cell">
                          <el-form-item label="是否启用标题删除过滤词" class="label-right-align">
                            <el-radio-group v-model="form.t9.sfqyydppgl">
                              <el-radio label="启用">启用</el-radio>
                              <el-radio label="不启用">不启用</el-radio>
                            </el-radio-group>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-col>
                    <el-col :span="24">
                      <el-row :gutter="20" class="grid-cell">
                        <el-col :span="8" class="grid-cell">
                          <el-form-item label="标题删除">
                            <el-input v-model="form.t9.btsc" type="text" clearable></el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="8" class="grid-cell">
                          <el-button type="primary">
                            <i class="el-icon iconfont icon-zhuanshukefu"></i>
                            <span>上传</span>
                          </el-button>
                          <el-button type="primary">
                            <i class="el-icon iconfont icon-zhuanshukefu"></i>
                            <span>查看</span>
                          </el-button>
                          <el-button type="primary">
                            <i class="el-icon iconfont icon-zhuanshukefu"></i>
                            <span>清空</span>
                          </el-button>
                        </el-col>
                        <el-col :span="8" class="grid-cell">
                          <el-form-item label="是否启用云端标题过滤词" class="label-right-align">
                            <el-radio-group v-model="form.t9.sfqyydbtsc">
                              <el-radio label="启用">启用</el-radio>
                              <el-radio label="不启用">不启用</el-radio>
                            </el-radio-group>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="是否过滤标题包含品牌词" class="label-right-align">
                        <el-radio-group v-model="form.t9.sfglbthbppc">
                          <el-radio label="过滤">过滤</el-radio>
                          <el-radio label="不过滤">不过滤</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="是否过滤云违规词库" class="label-right-align">
                        <el-radio-group v-model="form.t9.sfglydwgck">
                          <el-radio label="过滤">过滤</el-radio>
                          <el-radio label="不过滤">不过滤</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-card>
              </div>
            </div>
          </el-form>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="submitForm">{{ dialogButtonText }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, watchEffect, nextTick, watch } from 'vue'
import { ElMessage } from 'element-plus'
import CustomAnchor from '../components/CustomAnchor.vue'
import { useConfigStore } from '../stores/config'

const handleInput = (e, index, key) => {
  if (e == 0) {
    form.value.t7.cl[index][key] = ''
  }
}
const containerRef = ref(null)
const handleClick = (e) => {
  e.preventDefault()
}

// 获取配置store
const configStore = useConfigStore()
// 模板对话框相关变量
const yhpzRef = ref()
const handleNodeClick = (data) => {
  console.log('点击节点:', data)
  yhpzRef.value.setCurrentKey(data.id) // 点击时更新选中
}
const zdlmRef = ref(null)
const handleNodeClick2 = (data) => {
  console.log('点击节点:', data)
  zdlmRef.value.setCurrentKey(data.id) // 点击时更新选中
}
const setCheckedKeys = (data) => {
  yhpzRef.value.setCheckedKeys(data, false)
}
const setCheckedKeys2 = (data) => {
  zdlmRef.value.setCheckedKeys(data, false)
}

const dialogVisible = ref(false)
const dialogTitle = ref('新增模板')
const dialogButtonText = ref('确认')

watchEffect(async () => {
  if (dialogVisible.value) {
    // 初始化表单数据
    // initForm()
    await getLeimu()
    await getDiqu()
  }
})
const customAnchor = ref(null)
// 获取类目
let getLeimuData = ref([])
const getLeimu = async () => {
  try {
    const result = await window.electronAPI.getLeimu()
    if (result.success) {
      getLeimuData.value = result.data
      console.log('获取类目成功:', result.data)
    } else {
      console.error('获取类目失败:', result.message)
    }
  } catch (error) {
    console.error('获取类目异常:', error)
  }
}

// 获取地区
let getDiquData = ref([])
const getDiqu = async () => {
  try {
    const result = await window.electronAPI.getDiqu()
    if (result.success) {
      getDiquData.value = result.data
      console.log('获取地区成功:', result.data)
    } else {
      console.error('获取地区失败:', result.message)
    }
  } catch (error) {
    console.error('获取类目异常:', error)
  }
}
// 判断是否叶子节点（需根据数据结构调整）
const isLeafNode = (value) => {
  const findNode = (options, targetValue) => {
    for (const item of options) {
      if (item.value === targetValue) return item
      if (item.children) {
        const found = findNode(item.children, targetValue)
        if (found) return found
      }
    }
    return null
  }
  const node = findNode(getDiquData.value, value)
  return node && !node.children
}
const handleCascaderChange = (value) => {
  if (!isLeafNode(value)) {
    this.$message.warning('请选择最后一级选项！')
    form.value.t8.fhdq = []
  }
}

let loading = ref(false)
let page = ref(1)
let total = ref(0)
const handlePageChange = async (e) => {
  page.value = e
  await getTempData()
}

const closeDialog = () => {
  // 重置表单
  clearForm()
  dialogVisible.value = false
}
const defaultProps = {
  children: 'children',
  label: 'label'
}

const activeNames = ref(['t1', 't2', 't3', 't4'])

let tableData = ref([])
onMounted(async () => {
  getTempData()
})
const getTempData = async () => {
  loading.value = true
  setTimeout(async () => {
    let data = await window.electronAPI.getTemps(page.value, 10, '')
    tableData.value = data.temps
    loading.value = false
  }, 500)
}
const tableRef = ref(null)

const formRef = ref(null)
const form = ref({
  id: '',
  t1: {
    mbmc: '',
    xjcd: '',
    sjfs: '',
    ppgg: '',
    sjbm: '',
    shfw: [],
    zdyppmc: '',
    zdysjbm: ''
  },
  t2: {
    tjqz: '',
    tjhz: '',
    cznr: '',
    thnr: '',
    scnr: '',
    scbtq: '',
    scbth: '',
    glskucd: '',
    sfsckhnr: '',
    sfscbtsz: '',
    sfscbtkg: '',
    sfscbtzm: '',
    sfcrsjzf: '',
    sfyxcffb: ''
  },
  t3: {
    gllm: []
  },
  t4: {
    sku_mc: '',
    sku_kc: '',
    sku_jg: '',

    szsku: '',
    glskujgdy: '',
    glskujggy: '',
    glskukcdy: '',
    glskuxldy: '',
    bbykjdy: '',
    bbykjgy: '',
    glskumzbh: ''
  },
  t5: {
    tpysl: '',
    zdlm: '',
    scxkzbh: '',
    hzpbabh: '',
    ylqxzczh: '',
    ylqxscqy: '',
    twxqzdy: ''
  },
  t6: {
    sfsc34zt: '',
    sfztbwxqt: '',
    sfscskut: ''
  },
  t7: {
    cl: [
      { id: 1, k1: '', k2: '', k3: '', k4: '', k5: '', k6: '', k7: '', k8: '' },
      { id: 2, k1: '', k2: '', k3: '', k4: '', k5: '', k6: '', k7: '', k8: '' },
      { id: 3, k1: '', k2: '', k3: '', k4: '', k5: '', k6: '', k7: '', k8: '' },
      { id: 4, k1: '', k2: '', k3: '', k4: '', k5: '', k6: '', k7: '', k8: '' }
    ]
  },
  t8: {
    fhdq: [],
    fhsj: '',
    jffs: '',
    ybdqfy: '',
    gathwdqfy: '',
    pydqfy: '',
    bz: ''
  },
  t9: {
    btgl: '',
    sfqyydbtgl: '',
    ppgl: '',
    sfqyydppgl: '',
    btsc: '',
    sfqyydbtsc: '',
    sfglbthbppc: '',
    sfglydwgck: ''
  }
})
// 表单验证规则
const rules = ref({
  't1.mbmc': [{ required: true, message: '请输入模板名称', trigger: 'blur' }]
})
const anchorRef = ref(null)
// 打开新增模板对话框
const addTemp = () => {
  dialogTitle.value = '新增模板'
  dialogButtonText.value = '确认'
  dialogVisible.value = true
  // 重置表单
  anchorRef.value.scrollTo('#section1')
  clearForm()
}
const clearForm = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }

  form.value = {
    id: '',
    t1: {
      mbmc: '',
      xjcd: '',
      sjfs: '',
      ppgg: '',
      sjbm: '',
      shfw: [],
      zdyppmc: '',
      zdysjbm: ''
    },
    t2: {
      tjqz: '',
      tjhz: '',
      cznr: '',
      thnr: '',
      scnr: '',
      scbtq: '',
      scbth: '',
      glskucd: '',
      sfsckhnr: '',
      sfscbtsz: '',
      sfscbtkg: '',
      sfscbtzm: '',
      sfcrsjzf: '',
      sfyxcffb: ''
    },
    t3: {},
    t4: {
      szsku: '',
      glskujgdy: '',
      glskujggy: '',
      glskukcdy: '',
      glskuxldy: '',
      bbykjdy: '',
      bbykjgy: '',
      glskumzbh: ''
    },
    t5: {
      tpysl: '',
      zdlm: '',
      scxkzbh: '',
      hzpbabh: '',
      ylqxzczh: '',
      ylqxscqy: '',
      twxqzdy: ''
    },
    t6: {
      sfsc34zt: '',
      sfztbwxqt: '',
      sfscskut: ''
    },
    t7: {
      cl: [
        { id: 1, k1: '', k2: '', k3: '', k4: '', k5: '', k6: '', k7: '', k8: '' },
        { id: 2, k1: '', k2: '', k3: '', k4: '', k5: '', k6: '', k7: '', k8: '' },
        { id: 3, k1: '', k2: '', k3: '', k4: '', k5: '', k6: '', k7: '', k8: '' },
        { id: 4, k1: '', k2: '', k3: '', k4: '', k5: '', k6: '', k7: '', k8: '' }
      ]
    },
    t8: {
      fhsj: '',
      jffs: '',
      ybdqfy: '',
      gathwdqfy: '',
      pydqfy: '',
      bz: ''
    },
    t9: {
      btgl: '',
      sfqyydbtgl: '',
      ppgl: '',
      sfqyydppgl: '',
      btsc: '',
      sfqyydbtsc: '',
      sfglbthbppc: '',
      sfglydwgck: ''
    }
  }
}
// 打开编辑模板对话框
const editTemp = (row) => {
  dialogTitle.value = '修改模板'
  dialogButtonText.value = '更新'
  console.log('编辑的模板数据:', row)
  // 复制行数据到表单
  form.value = { ...JSON.parse(row.content) }
  form.value.id = row.id

  console.log('编辑的模板数据:', form.value)
  dialogVisible.value = true
  anchorRef.value.scrollTo('#section1')
}

watch(
  () => dialogVisible.value,
  (newVal) => {
    if (newVal && dialogTitle.value === '修改模板') {
      nextTick(() => {
        if (form.value.t3.gllm) {
          setCheckedKeys(form.value.t3.gllm)
        }
        if (form.value.t5.zdlm) {
          setCheckedKeys2(form.value.t5.zdlm)
        }
      })
    } else {
      nextTick(() => {
        setCheckedKeys([])
        setCheckedKeys2([])
      })
    }
  }
)

// 提交表单
const submitForm = async () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      // 过滤类目
      const selectedNode1 = yhpzRef.value.getCheckedKeys(false)
      form.value.t3.gllm = selectedNode1
      // 指定类目
      const selectedNode2 = zdlmRef.value.getCheckedKeys(false)
      form.value.t5.zdlm = selectedNode2

      // 这里可以添加提交数据到后端的逻辑
      console.log('提交的模板数据:', form.value)

      // 模拟提交成功
      if (dialogTitle.value === '新增模板') {
        await window.electronAPI.addTemp(form.value.t1.mbmc, JSON.stringify(form.value))
        getTempData()
        ElMessage.success('模板添加成功')
      } else {
        console.log('编辑的模板数据:', JSON.stringify(form.value))
        await window.electronAPI.editTemp(
          form.value.id,
          form.value.t1.mbmc,
          JSON.stringify(form.value)
        )
        getTempData()
        ElMessage.success('模板更新成功')
      }
      dialogVisible.value = false
    } else {
      ElMessage.error('表单验证失败，请检查输入数据')
    }
  })
}
</script>

<style scoped>
.section {
  margin-bottom: 20px;
  width: 100%;
}
:deep(.nav .el-anchor__link) {
  font-size: 14px !important;
  font-weight: 500;
  margin: 0% 10px !important;
}
.affix-container {
  overflow-y: hidden;
  position: relative;
}
</style>
